<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js 柱状图示例</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .bar {
            fill: steelblue;
            transition: fill 0.3s ease;
        }
        .bar:hover {
            fill: orange;
        }
        .axis text {
            font-size: 12px;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        .title {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">水果销量统计</h1>
        <div id="chart"></div>
    </div>

    <script>
        // 示例数据
        const fruitData = [
            { name: '苹果', sales: 120 },
            { name: '香蕉', sales: 80 },
            { name: '橙子', sales: 150 },
            { name: '葡萄', sales: 60 },
            { name: '草莓', sales: 90 },
            { name: '西瓜', sales: 200 }
        ];

        // 设置图表尺寸和边距
        const margin = { top: 20, right: 30, bottom: 40, left: 40 };
        const width = 600 - margin.left - margin.right;
        const height = 400 - margin.top - margin.bottom;

        // 创建 SVG 元素
        const svg = d3.select('#chart')
            .append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left},${margin.top})`);

        // 创建比例尺
        const xScale = d3.scaleBand()
            .domain(fruitData.map(d => d.name))
            .range([0, width])
            .padding(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(fruitData, d => d.sales)])
            .range([height, 0]);

        // 创建坐标轴
        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScale);

        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', `translate(0,${height})`)
            .call(xAxis);

        svg.append('g')
            .attr('class', 'y axis')
            .call(yAxis);

        // 创建柱状图
        svg.selectAll('.bar')
            .data(fruitData)
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('x', d => xScale(d.name))
            .attr('y', d => yScale(d.sales))
            .attr('width', xScale.bandwidth())
            .attr('height', d => height - yScale(d.sales))
            .on('mouseover', function(event, d) {
                d3.select(this)
                    .transition()
                    .duration(300)
                    .attr('fill', '#ff6b6b');
                
                // 显示提示信息
                const tooltip = svg.append('g')
                    .attr('class', 'tooltip')
                    .attr('transform', `translate(${xScale(d.name) + xScale.bandwidth()/2},${yScale(d.sales) - 10})`);

                tooltip.append('text')
                    .text(`${d.name}: ${d.sales}份`)
                    .attr('text-anchor', 'middle')
                    .attr('font-weight', 'bold')
                    .attr('fill', '#333');
            })
            .on('mouseout', function(event, d) {
                d3.select(this)
                    .transition()
                    .duration(300)
                    .attr('fill', 'steelblue');
                
                // 移除提示信息
                svg.selectAll('.tooltip').remove();
            });

        // 添加标题
        svg.append('text')
            .attr('x', width / 2)
            .attr('y', -5)
            .attr('text-anchor', 'middle')
            .attr('font-size', '16px')
            .attr('font-weight', 'bold')
            .text('月度水果销量统计');

        // 添加Y轴标签
        svg.append('text')
            .attr('transform', 'rotate(-90)')
            .attr('y', -margin.left + 10)
            .attr('x', -height / 2)
            .attr('dy', '1em')
            .attr('text-anchor', 'middle')
            .text('销量（份）');
    </script>
</body>
</html>